<!DOCTYPE html>
<html>
<head>
    <title>灵人直播控制系统</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="{{ url_for('static', filename = 'index.js') }}"></script>
</head>
<body>
    <div class="container mt-5">
        <h2>灵人直播控制系统直播端</h2>
        <ul class = "nav nav-tabs mb-3" id = "myTab" role = "tablist">
          <li class = "nav-item" role = "presentation">
            <button class = "nav-link active" id = "home-tab" data-bs-toggle = "tab" type = "button" role = "tab" aria-controls = "scene-1" aria-selected = "true" onclick = 'selectScene("scene-1")'>场景-1</button>
          </li>
          <li class = "nav-item" role = "presentation">
            <button class = "nav-link" id = "profile-tab" data-bs-toggle = "tab" type = "button" role = "tab" aria-controls = "scene-2" aria-selected = "false" onclick = 'selectScene("scene-2")'>场景-2</button>
          </li>
          <li class = "nav-item" role = "presentation">
            <button class = "nav-link" id = "contact-tab" data-bs-toggle = "tab" type = "button" role = "tab" aria-controls = "scene-3" aria-selected = "false" onclick = 'selectScene("scene-3")'>场景-3</button>
          </li>
          <li class = "nav-item" role = "presentation">
            <button class = "nav-link" id = "contact-tab" data-bs-toggle = "tab" type = "button" role = "tab" aria-controls = "scene-4" aria-selected = "false" onclick = 'selectScene("scene-4")'>场景-4</button>
          </li>
          <li class = "nav-item" role = "presentation">
            <button class = "nav-link" id = "contact-tab" data-bs-toggle = "tab" type = "button" role = "tab" aria-controls = "scene-5" aria-selected = "false" onclick = 'selectScene("scene-5")'>场景-5</button>
          </li>
        </ul>
        <div class = "mb-3">
            <label for = "productSelect" class = "form-label">选择产品</label>
            <select class = "form-select" id = "productSelect" onchange = "selectProduct()">
                <option value = "">选择产品</option>
                {% for product in products %}
                <option value = "{{ product }}">{{ product }}</option>
                {% endfor %}
            </select>
        </div>
        <div class = "mb-3">
            <label for = "streamerSelect" class = "form-label">选择设备</label>
            <select class = "form-select" id = "deviceSelect" onchange = "selectDevice()">
                <option value = "">选择设备</option>
                {% for device in devices %}
                <option value = "{{ device }}">{{ device }}</option>
                {% endfor %}
            </select>
        </div>
        <div class = "form-floating mb-3">
          <textarea class = "form-control mb-3" placeholder = "Leave a comment here" id = "ip_address" style = "height: 100px"></textarea>
          <label for = "ip_address">输入AI电脑IP地址</label>
        </div>
        <div class = "mb-3">
            <button id = "startGetAudio" type = "button" class = "btn button btn-primary" onclick = "startGetAudio()">开始获取音频</button>
            <button id = "startPlayAudio" type = "button" class = "btn button btn-primary" onclick = "startPlayAudio()">开始播放音频</button>
            <button id = "pausePlayAudio" class = "btn btn-danger" onclick = "pausePlayAudio()">暂停直播</button>
            <!-- <button id = "stopGetAudio" class = "btn btn-danger" onclick = "stopGetAudio()">暂停获取音频</button> -->
            <button id = "clearAudio" class = "btn btn-danger" onclick = "clearAudio()">清空音频</button>
        </div>
        <div class = "mb-3">
            <label for = "replySentSelect" class = "form-label">选择插话</label>
            <select class = "form-select" id = "replySentSelect" onchange = "selectReplySent()">
                <option value = "">选择插话</option>
            </select>
        </div>
        <div class = "form-floating mb-3">
          <textarea class = "form-control mb-3" placeholder="Leave a comment here" id = "floatingTextarea2" style = "height: 100px"></textarea>
          <label for = "floatingTextarea2">在这里写想要让主播讲的话</label>
          <button id = "sendReplySent" class = "btn button btn-primary" onclick = "sendReplySent()">发送插话</button>
        </div>
        <div style="height:2000px;"></div>
    </div>
</body>
</html>